<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${article.title} - ${site.seoTitle!site.title}</title>
  <meta name="keywords" content="${article.seoKeywords}">
  <meta name="description" content="${article.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  <link rel="stylesheet" href="${files}/vendor/pdfjs-dist/legacy/web/pdf_viewer.css">
  <style>

    #viewerWrapper {
      position: relative;
      width: 100%;
    }

    .viewerWrapperNormal {
      height: 960px;
    }

    .viewerWrapperFull {
      height: calc(100% - 46px);
    }

    #viewerContainer {
      outline: none;
      overflow: auto;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body tabindex="1">
[#include 'inc_header.html'/]
[#include 'inc_message_box.html'/]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.paths as c]
        <li class="list-inline-item">/</li>
        <li class="list-inline-item">[@A bean=c/]</li>
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h3 class="cm-ff-yh">${article.title}</h3>
      <div class="mt-3 pb-2 border-bottom text-muted">
        <span>${format(article.publishDate, 'yyyy-MM-dd HH:mm')}</span>
        [#if article.source??]<span class="ml-2">${article.source}</span>[/#if]
        [#if article.author??]<span class="ml-2">${article.author}</span>[/#if]
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          request.get('${api}/article/view/${article.id?c}').then(function (response) {
            $('#views').text(response.data);
          });
        </script>
      </div>
      [#if article.doc??]
      <div id="fullContainer" class="mt-3 text-center bg-secondary border">
        <div id="toolbar" class="position-relative sticky-top p-1">
          <button class="btn btn-outline-light" onclick="pdfViewer.decreaseScale()">-</button>
          <button class="btn btn-outline-light ml-2" onclick="pdfViewer.increaseScale()">+</button>
          <button id="fullscreenButton" class="btn btn-outline-light ml-2" onclick="fullscreen()">全屏</button>
          <button id="exitFullscreenButton" class="btn btn-outline-light ml-2 cm-hidden" onclick="exitFullscreen()">退出</button>
        </div>
        <div id="viewerWrapper" class="bg-secondary viewerWrapperNormal">
          <div id="viewerContainer" tabindex="0">
            <div id="viewer" class="pdfViewer"></div>
          </div>
        </div>
      </div>
      <script type="module">
        import * as pdfjsLib from '${files}/vendor/pdfjs-dist/legacy/build/pdf.mjs';
        import * as pdfjsViewer from '${files}/vendor/pdfjs-dist/legacy/web/pdf_viewer.mjs';

        if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
          alert("Please build the pdfjs-dist library");
        }

        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc =
          "${files}/vendor/pdfjs-dist/legacy/build/pdf.worker.mjs";

        // Some PDFs need external cmaps.
        const CMAP_URL = "${files}/vendor/pdfjs-dist/cmaps/";
        const CMAP_PACKED = true;

        const DEFAULT_URL = "${article.doc}";
        const ENABLE_XFA = true;
        const SEARCH_FOR = ""; // try "Mozilla";

        // PDF.js 4.x: sandbox is now in /build, not /legacy/build
        const SANDBOX_BUNDLE_SRC = "${files}/vendor/pdfjs-dist/build/pdf.sandbox.js";

        const container = document.getElementById("viewerContainer");

        const eventBus = new pdfjsViewer.EventBus();

        // (Optionally) enable hyperlinks within PDF files.
        const pdfLinkService = new pdfjsViewer.PDFLinkService({
          eventBus,
        });

        // (Optionally) enable find controller.
        const pdfFindController = new pdfjsViewer.PDFFindController({
          eventBus,
          linkService: pdfLinkService,
        });

        // (Optionally) enable scripting support.
        const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
          eventBus,
          sandboxBundleSrc: SANDBOX_BUNDLE_SRC,
        });

        // PDF.js 4.x: PDFViewer now requires a "renderer" option, default is "canvas"
        const pdfViewer = new pdfjsViewer.PDFViewer({
          container,
          eventBus,
          linkService: pdfLinkService,
          findController: pdfFindController,
          scriptingManager: pdfScriptingManager,
          renderer: "canvas"
        });
        pdfLinkService.setViewer(pdfViewer);
        pdfScriptingManager.setViewer(pdfViewer);

        eventBus.on("pagesinit", function () {
          pdfViewer.currentScaleValue = "page-width";
          if (SEARCH_FOR) {
            eventBus.dispatch("find", {type: "", query: SEARCH_FOR});
          }
        });

        // Loading document.
        const loadingTask = pdfjsLib.getDocument({
          url: DEFAULT_URL,
          cMapUrl: CMAP_URL,
          cMapPacked: CMAP_PACKED,
          enableXfa: ENABLE_XFA,
        });
        (async function () {
          const pdfDocument = await loadingTask.promise;
          pdfViewer.setDocument(pdfDocument);
          pdfLinkService.setDocument(pdfDocument, null);
        })();

        // Expose pdfViewer for zoom controls
        window.pdfViewer = pdfViewer;

        // Initialize fullscreen functionality
        var fullContainer = document.getElementById('fullContainer');
        var viewerWrapper = document.getElementById('viewerWrapper');

        // 进入全屏
        window.fullscreen = function() {
          if (fullContainer.requestFullscreen) {
            fullContainer.requestFullscreen();
          } else if (fullContainer.mozRequestFullScreen) {
            fullContainer.mozRequestFullScreen();
          } else if (fullContainer.webkitRequestFullscreen) {
            fullContainer.webkitRequestFullscreen();
          } else if (fullContainer.msRequestFullscreen) {
            fullContainer.msRequestFullscreen();
          }
        };

        // 退出全屏
        window.exitFullscreen = function() {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        };

        function isFullscreen() {
          return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
        }

        function _fullscreenChange() {
          if (isFullscreen()) {
            $('#fullscreenButton').hide();
            $('#exitFullscreenButton').show();
            $(fullContainer).addClass('overflow-auto');
            $(viewerWrapper).addClass('viewerWrapperFull').removeClass('viewerWrapperNormal');
            $('#viewerContainer').focus();
          } else {
            $('#fullscreenButton').show();
            $('#exitFullscreenButton').hide();
            $(fullContainer).removeClass('overflow-auto');
            $(viewerWrapper).addClass('viewerWrapperNormal').removeClass('viewerWrapperFull');
          }
        }

        function _addFullscreenChangeListeners() {
          window.addEventListener("fullscreenchange", _fullscreenChange);
          window.addEventListener("mozfullscreenchange", _fullscreenChange);
          window.addEventListener("webkitfullscreenchange", _fullscreenChange);
          window.addEventListener("MSFullscreenChange", _fullscreenChange);
        }

        _addFullscreenChangeListeners();
      </script>
      [/#if]
      <div class="mt-4" id="articleText">[#noescape]${article.text!}[/#noescape]</div>
      <div class="lead d-flex justify-content-center text-info">
        <div class="cm-pointer" onclick="voteUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cm-pointer ml-4" onclick="voteDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function voteUp() {
          fetchCsrf().then(function () {
            request.post('${api}/article/up/${article.id?c}').then(function (response) {
              if (response.data <= 0) {
                alert("您已经参与过一次！");
                return;
              }
              $('#ups').text(response.data);
            });
          });
        }

        function voteDown() {
          fetchCsrf().then(function () {
            request.post('${api}/article/down/${article.id?c}').then(function (response) {
              if (response.data <= 0) {
                alert("您已经参与过一次！");
                return;
              }
              $('#downs').text(response.data);
            });
          });
        }

        request.get('${api}/article/buffer/${article.id?c}').then(function (response) {
          $('#ups').text(response.data.ups);
          $('#downs').text(response.data.downs);
        });
        $('#articleText img').addClass('img-fluid');
      </script>

      <ul class="mt-4 list-unstyled">
        [@ArticleNext id=article.id order=article.order channelId=article.channelId isDesc=article.channel.orderDesc; bean]
        <li class="text-truncate mt-2">
          <strong>上一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
        </li>
        [/@ArticleNext]
        [@ArticlePrev id=article.id order=article.order channelId=article.channelId isDesc=article.channel.orderDesc; bean]
        <li class="text-truncate mt-2">
          <strong>下一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
        </li>
        [/@ArticlePrev]
      </ul>

      <h5 class="mt-4 border-bottom"><span class="cm-block-head-bottom">相关新闻</span></h5>
      [@EsArticleList q=article.title excludeId=article.id limit=5; list]
      <ul class="list-unstyled mt-3">
        [#list list as bean]
        <li class="text-truncate mt-2">[@A bean=bean class="cm-link"/]</li>
        [/#list]
      </ul>
      [/@EsArticleList]
    </div>
  </div>
</div>
[#include 'inc_footer.html'/]
</body>
</html>
[/#escape]
